<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: chen_yt
 * @Date: 2022-07-04 13:43:30
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-07-22 10:15:19
-->
<template>
  <div>
    <div class="client-config">
      <div class="default-client">
        <div
          class="default-client-header"
          :style="{ background: themeMixWhite }"
        >
          <div class="default-client-header-title">
            {{ LANG.DEFAULT_CLIENT }}
          </div>

          <fks-button text icon="fks-icon-edit" @click="editDefaultClient">
            <span> {{ LANG.EDIT }}</span>
          </fks-button>
        </div>
        <fks-row class="default-client-body">
          <fks-col :span="4">
            <p class="title">{{ LANG.NAME }}</p>
            <p>{{ defaultClient.clientName }}</p>
          </fks-col>
          <fks-col :span="8">
            <p class="title">{{ LANG.REDIRECT_URL }}</p>
            <p>{{ defaultClient.webServerRedirectUri }}</p>
          </fks-col>
          <fks-col :span="6">
            <p class="title">{{ LANG.CLIENT_ID }}</p>
            <p>{{ defaultClient.clientId }}</p>
          </fks-col>
          <fks-col :span="6">
            <p class="title">{{ LANG.CLIENT_SECRET }}</p>
            <p>{{ defaultClient.clientSecret }}</p>
          </fks-col>
        </fks-row>
      </div>

      <fks-query-page
        v-loading="loadingClient"
        :table-name="LANG.THIRD_PARTY_CLIENT"
        :data="thirdPartyList"
        row-key="id"
        :page="false"
        :element-loading-text="LANG.LOADING"
        @sort-change="sortHandler"
        class="third-party-client"
      >
        <template slot="singleSearch">
          <div class="single-searchBox">
            <fks-button
              v-permission="['client:add']"
              type="primary"
              icon="fks-icon-plus"
              @click="addThirdPartyClient"
            >
              {{ LANG.ADD }}
            </fks-button>
          </div>
        </template>
        <template>
          <fks-table-column type="index" align="center" label="#" />
          <fks-table-column
            :label="LANG.CLIENT_NAME"
            prop="clientName"
            sortable="custom"
            align="left"
            header-align="center"
            width="200"
          />
          <fks-table-column
            :label="LANG.REDIRECT_URL"
            prop="webServerRedirectUri"
            align="left"
            header-align="center"
            width="500"
          />
          <fks-table-column
            :label="LANG.CLIENT_ID"
            prop="clientId"
            align="left"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.CLIENT_SECRET"
            prop="clientSecret"
            align="left"
            header-align="center"
          />
          <fks-table-column :label="LANG.OPERATION" width="100" align="left">
            <template slot-scope="scope">
              <fks-button
                v-permission="['client:edit']"
                type="text"
                @click="editThirdPartyClient(scope.row)"
              >
                {{ LANG.EDIT }}
              </fks-button>
              <fks-button
                v-permission="['client:delete']"
                danger-text
                @click="delThirdPartyClient(scope.row)"
              >
                {{ LANG.DELETE }}
              </fks-button>
            </template>
          </fks-table-column>
        </template>
      </fks-query-page>
    </div>
    <client-detail
      v-if="visible"
      :type="type"
      :visible.sync="visible"
      :data.sync="node"
      @close="visible = false"
    />
  </div>
</template>

<script>
import { GET_LATEST_CLIENT_CONFIG } from '@/store/Action/actionTypes'
import {
  CLIENT_CONFIG,
  IS_SAAS_MODE,
  THEME
} from '@/store/Getter/getterTypes.js'
import { LATEST_CLIENT_CONFIG } from '@/store/State/stateTypes'
import { getClients, deleteClient } from '@/modules/SysConfig/Tenant/api'
import { colorMix } from '@/utils/color'
import ClientDetail from '../ClientDetail/saas'
export default {
  name: 'Client',
  components: {
    ClientDetail
  },
  data() {
    return {
      type: 'add',
      loadingClient: false,
      visible: false,
      node: {},
      list: [],
      sort: '',
      columnName: ''
    }
  },
  computed: {
    themeMixWhite() {
      return colorMix(this.theme)
    },
    theme() {
      return this.$store.getters[THEME]
    },
    defaultClient() {
      return this.$store.state[LATEST_CLIENT_CONFIG]
    },
    thirdPartyList() {
      return this.list.filter(
        (item) =>
          item.clientId !== this.defaultClient.clientId ||
          item.clientSecret !== this.defaultClient.clientSecret
      )
    },
    tenantId() {
      let { tenantId } = this.$store.getters[CLIENT_CONFIG]
      return tenantId
    },
    searchParams() {
      let isSaas = this.$store.getters[IS_SAAS_MODE]

      return {
        pageNo: 1,
        pageSize: 999,
        sort: this.sort,
        columnName: this.columnName,
        tenantId: isSaas ? this.tenantId : ''
      }
    }
  },
  methods: {
    /**
     * @description: 打开新增应用弹窗
     */
    addThirdPartyClient() {
      this.node = {
        tenantId: this.tenantId
      }
      this.type = 'add'
      this.visible = true
    },

    /**
     * @description: 打开编辑应用弹窗
     */
    editClient(val) {
      let tenantId = this.tenantId
      let { clientId, clientName, clientSecret, webServerRedirectUri, id } = val
      this.node = {
        clientId,
        clientName,
        clientSecret,
        webServerRedirectUri,
        id,
        tenantId
      }
      this.type = 'edit'
      this.visible = true
    },

    editThirdPartyClient(val) {
      this.editClient(val)
    },

    editDefaultClient() {
      this.editClient(this.defaultClient)
    },

    //删除应用
    delThirdPartyClient(val) {
      this.$confirm(this.LANG.DELETE_CONFIRM, {
        title: this.LANG.TIPS,
        type: 'warning',
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-button--danger',
        deleteMode: true
      })
        .then(() => {
          deleteClient(val.id)
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.DELETE_SUCCESS)
                this.getClients()
              }
            })
            .catch(() => {})
        })
        .catch(() => {})
    },

    //应用列表排序
    sortHandler(data) {
      if (!data.order) {
        this.sort = ''
        this.columnName = ''
      } else {
        this.sort = data.order == 'ascending' ? 'asc' : 'desc'
        this.columnName = 'client_name'
      }
      this.getClients()
    },

    getClients() {
      this.loadingClient = true
      this.$store.dispatch(GET_LATEST_CLIENT_CONFIG)
      getClients(this.searchParams)
        .then((res) => {
          if (res.data && res.data.list) {
            this.list = res.data.list
          } else {
            this.list = []
          }
        })
        .catch((err) => {
          this.list = []
        })
        .finally(() => {
          this.loadingClient = false
        })
    }
  },
  mounted() {
    this.getClients()
  }
}
</script>

<style lang='scss' scoped>
.client-config {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.default-client {
  flex-grow: 0;
  flex-shrink: 1;
  border: 1px solid #f7f7f7;
  margin-bottom: 32px;
  &-header {
    display: flex;
    justify-content: space-between;
    padding: 8px 32px;
    &-title {
      line-height: 36px;
      color: #191919;
      font-size: 16px;
      font-weight: 600;
    }
  }
  &-body {
    padding: 24px 32px;
    font-size: 14px;
    color: #555555;
    line-height: 20px;

    font-weight: 400;
    word-wrap: break-word;
    p {
      margin: 0;
      padding: 0 10px;
    }
    .title {
      color: #191919;
      font-weight: 500;
      margin-bottom: 24px;
    }
  }
}
.third-party-client {
  flex-grow: 1;
  padding: 0 16px;
  min-height: 100px;
}
</style>